<div class="filter-bar shrink-0 p-2 flex items-center gap-4 overflow-hidden max-w-full">
    <ngm-select class="filter-bar__item" [label]="'PAC.Copilot.ExpertRole' | translate: {Default: 'Expert Role'}"
        valueKey="key"
        searchable
        [displayBehaviour]="DisplayBehaviour.descriptionOnly"
        [selectOptions]="roles()"
        [(ngModel)]="roleFilter"
        [disabled]="loading()"
    />

    <ngm-select class="filter-bar__item" [label]="'PAC.Copilot.Examples.Command' | translate: {Default: 'Command'} "
        valueKey="key"
        searchable
        [displayBehaviour]="DisplayBehaviour.descriptionOnly"
        [selectOptions]="commands()"
        [(ngModel)]="commandFilter"
        [disabled]="loading()"
    />

    <span class="flex-1"></span>
    <input #fileUpload type="file" class="file-input invisible"
        (change)="handleUploadChange($event)"
        (click)="fileUpload.value=null;">
    <div ngmButtonGroup >
        <button mat-icon-button [disabled]="loading()" [matTooltip]=" 'PAC.Copilot.Examples.DownloadTemplate' | translate: {Default: 'Download template'} "
            (click)="downloadTemplate()">
            <mat-icon fontSet="material-icons-round">system_update_alt</mat-icon>
        </button>

        <button mat-icon-button [disabled]="loading()" [matTooltip]=" 'PAC.Copilot.Examples.UploadExamples' | translate: {Default: 'Upload examples'} " (click)="fileUpload.click()">
            <mat-icon fontSet="material-icons-round">upload</mat-icon>
        </button>

        <button mat-mini-fab [disabled]="loading()" [matTooltip]=" 'PAC.Copilot.Examples.AddExample' | translate: {Default: 'Add example'} "
            (click)="addExample()">
            <mat-icon fontSet="material-icons-round">add</mat-icon>
        </button>
    </div>
    
</div>

<ngm-table class="flex-1 overflow-hidden" [columns]="columns()" [data]="items()" displayDensity="cosy" paging />

@if (loading()) {
    <div class="absolute w-full h-full flex justify-center items-center">
        <mat-progress-spinner mode="indeterminate" diameter="26" strokeWidth="2" />
    </div>
}

<ng-template #vector let-vector>
  @if (vector) {
    <mat-icon fontSet="material-icons-round">text_rotation_angleup</mat-icon>
  }
</ng-template>

<ng-template #actionTemplate let-id="id" let-input="input">
    <div class="flex items-center">
        <button mat-icon-button [matTooltip]="'PAC.Copilot.Examples.EditExample' | translate: {Default: 'Edit example'}"
            (click)="editExample(id)"
        >
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>
        <mat-divider vertical style="height: 20px;"></mat-divider>
        <button mat-icon-button ngmAppearance="danger" [matTooltip]="'PAC.Copilot.Examples.DeleteExample' | translate: {Default: 'Delete example'}"
            (click)="deleteExample(id, input)"
        >
            <mat-icon fontSet="material-icons-outlined">delete</mat-icon>
        </button>
    </div>
</ng-template>

<router-outlet #o="outlet"></router-outlet>